<template>
    <div class="down">
        <el-form ref="phoneForm" :model="phoneForm" :rules="phoneRules" class="phone-form">
            <div class="title-top">
                <div class="title-style"></div>
                <h3 class="title">忘记密码</h3>
            </div>
            <!-- 手机号 -->
            <el-form-item prop="phone" label-width="80px" label="手机号:" style="width:430px">
                <div style="display:flex">
                    <!-- 下拉选择框 -->
                    <el-select style="width: 80px" v-model="phone" disabled>
                        <!-- <el-option selected>+86(中国)</el-option> -->
                    </el-select>
                    <el-input style="width: 270px" v-model="phoneForm.phone" type="text" auto-complete="off"
                        placeholder="请输入您的手机号">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                </div>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="code" label-width="80px" label="验证码:" style="width:430px">
                <div style="display: flex;width:470px">
                    <el-input style="width: 180px" v-model="phoneForm.code" type="text" auto-complete="off">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                    <button class="verification">
                        免费获取短信验证码
                    </button>
                </div>
            </el-form-item>
            <el-form-item prop="password" label-width="80px" label="密码:" style="width:430px">
                <div style="display:flex">
                    <!-- 下拉选择框 -->
                    <el-input style="width: 350px" v-model="phoneForm.password" type="text" auto-complete="off"
                        placeholder="请输入新密码">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                </div>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop=" confirmPassword" label-width="80px" label="确认密码:" style="width:430px">
                <div style="display: flex;width:470px">
                    <el-input style="width: 350px" v-model="phoneForm.confirmPassword" type="text" auto-complete="off"
                        placeholder="确认密码">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item style="width:100%;margin-top:30px;">
                <el-button :loading="loading" size="medium" type="primary"
                    style="width: 410px;margin-left:20px">
                    <span v-if="!loading">确认重置</span>
                    <span v-else>跳转中...</span>
                </el-button>
                <!-- <div style="float: right;">
                  <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
                </div> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>

export default {
    data() {

        const equalToPassword = (rule, value, callback) => {
            if (this.phoneForm.password !== value) {
                callback(new Error("两次输入的密码不一致"));
            } else {
                callback();
            }
        }
        return {
            phoneForm: {
                phone: '',
                code: '',
                password: '',
                confirmPassword: ''
            },
            phone: '+86',
            phoneRules: {
                phone: [{ required: true, trigger: "blur", message: "请输入您的手机号" }],
                code: [{ required: true, trigger: "change", message: "请输入验证码" }],
                password: [{ required: true, trigger: "blur", message: "请输入新密码" }],
                confirmPassword: [{ required: true, trigger: "blur", message: "请再次输入密码" },
                { required: true, validator: equalToPassword, trigger: "blur" }],

            },
            loading: false,

        };


    },
    methods: {
    }

}


</script>
<style scoped lang="scss">
.down {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    height: 100%;

    .title {
        text-align: center;
        margin-bottom: 30px;
        font-size: 20px;
        // border-left: 10px solid  rgb(38, 178, 243);
    }

}

.phone-form {
    // border: 1px solid  rgb(38, 178, 243);
    padding: 50px;

    .el-input {
        height: 38px;
        border-radius: 15px;

        input {
            height: 38px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
        border-radius: 15px;
    }
}

.verification {
    margin-left: 30px;
}
</style>